import { createVNode, render, h } from 'vue';
import { Empty } from 'ant-design-vue';
// import { HEmpty } from './components/HEmpty.tsx';
const toggleEmpty = (el: any, binding: any) => {
    let res = true;
    // 是数组就判断长度
    if (Array.isArray(binding.value)) {
        res = !!binding.value.length;
    } else {
        res = !!binding.value;
    }
    if (!res) {
        // const vdom = createVNode(HEmpty);
        const vdom = createVNode(Empty, { description: '暂无数据', image: require('@/assets/images/guidePc.png'), imageStyle: { height: '200px' } });
        let container: any = undefined;
        container = (document as any).createElement('div');
        container.style.width = '100%';
        container.style.height = '100%';
        container.style.display = 'flex';
        container.style['justify-content'] = 'center';
        container.style['align-items'] = 'center';
        container && render(vdom, container);
        // 为了防止多次重复添加同一子节点
        if (el.emptyContainer) {
            if (el.emptyContainer.parentNode === el) {
                return;
            }
        }
        el.appendChild(container);
        el.vm = vdom;
        el.emptyContainer = container;
    } else {
        if (el.emptyContainer) {
            if (el.emptyContainer.parentNode) {
                el.emptyContainer.parentNode.removeChild(el.emptyContainer);
            }
        }
    }
};
const vEmpty = {
    // 当被绑定的元素挂载到 DOM 中时……
    mounted(el: any, binding: any) {
        toggleEmpty(el, binding);
    },
    updated(el: any, binding: any) {
        toggleEmpty(el, binding);
    }
};

export const setupEmptyDirective = (app: any) => {
    app.directive('empty', vEmpty);
};